<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>欢迎使用 Web Page Width Optimizer</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            color: #333;
        }

        .container {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 30px;
        }

        h1 {
            color: #2196F3;
            text-align: center;
            margin-bottom: 30px;
        }

        .feature-list {
            list-style: none;
            padding: 0;
        }

        .feature-list li {
            margin-bottom: 15px;
            padding-left: 25px;
            position: relative;
        }

        .feature-list li:before {
            content: "✓";
            color: #2196F3;
            position: absolute;
            left: 0;
        }

        .usage-steps {
            background: #f5f5f5;
            padding: 20px;
            border-radius: 6px;
            margin: 20px 0;
        }

        .usage-steps h2 {
            margin-top: 0;
        }

        .tip {
            background: #e3f2fd;
            padding: 15px;
            border-radius: 6px;
            margin: 20px 0;
        }

        .tip h3 {
            margin-top: 0;
            color: #1976D2;
        }

        .footer {
            text-align: center;
            margin-top: 30px;
            color: #666;
        }

        .button {
            display: inline-block;
            background: #2196F3;
            color: white;
            padding: 10px 20px;
            border-radius: 4px;
            text-decoration: none;
            margin: 10px;
        }

        .button:hover {
            background: #1976D2;
        }

        .screenshot {
            max-width: 100%;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>欢迎使用 宽屏显示优化器</h1>
        
        <p>感谢您安装 宽屏显示优化器！这个扩展程序可以帮助您优化网页显示宽度，提供更好的阅读体验。</p>

        <h2>主要功能</h2>
        <ul class="feature-list">
            <li>自动调整网页内容宽度至合适尺寸</li>
            <li>页面内容自动居中显示</li>
            <li>支持自定义最大宽度设置（500-2000px）</li>
            <li>支持网站白名单管理</li>
            <li>即时开启/关闭优化效果</li>
        </ul>

        <div class="usage-steps">
            <h2>使用方法</h2>
            <ol>
                <li>点击浏览器工具栏中的插件图标 <img src="icons/icon16.png" style="vertical-align: middle;"></li>
                <li>在弹出的面板中开启宽度优化</li>
                <li>调整最大宽度（默认1100px）</li>
                <li>全局模式：调整所有网站</li>
                <li>局部模式：只调整优化名单中的网站</li>
                <li>可以将不希望优化的网站添加到白名单，白名单中的网站不会被调整</li>
            </ol>
        </div>

        <div class="tip">
            <h3>小贴士</h3>
            <p>如果某个网站不需要优化，您可以：</p>
            <ul>
                <li>临时关闭优化开关</li>
                <li>将网站添加到白名单中</li>
            </ul>
        </div>

        <!-- <div style="text-align: center; margin: 30px 0;">
            <a href="#" class="button" id="startOptimizing">开始优化</a>
            <a href="https://github.com/your-repo" class="button" target="_blank">查看源代码</a>
        </div> -->

        <div class="footer">
            <p>版本 1.0.0 | 开源项目</p>
            <p>如有问题或建议，欢迎在 GitHub 上提交 Issue</p>
        </div>
    </div>

    <script>
        // 处理"开始优化"按钮点击
        document.getElementById('startOptimizing').addEventListener('click', (e) => {
            e.preventDefault();
            // 启用优化
            chrome.storage.sync.set({
                enabled: true,
                maxWidth: 1100
            }, () => {
                // 关闭欢迎页面
                window.close();
            });
        });
    </script>
</body>
</html> 